<template>
    <div style="margin-bottom: 10%">
        <div class="ti-tishi">
            <div class="ti-first">
                <div class="img-right">
                    <i class="element-icons el-icon202yonghu_yonghu3" style="font-size: 80px;"></i>
                </div>
                <div class="message">
                    <div class="title">
                        签到次数
                    </div>
                    <div class="count">
                        <span>{{countMessage}}</span>
                    </div>
                </div>
            </div>
            <div class="ti-second">
                <div class="img-right">
                    <i class="element-icons el-iconliaotianjilu" style="font-size: 80px;"></i>
                </div>
                <div class="message">
                    <div class="title">
                        投诉次数
                    </div>
                    <div class="count">
                        <span>{{countMessage}}</span>
                    </div>
                </div>
            </div>
            <div class="ti-third">
                <div class="img-right">
                    <i class="element-icons el-iconrenminbi" style="font-size: 80px;"></i>
                </div>
                <div class="message">
                    <div class="title">
                        投诉处理
                    </div>
                    <div class="count">
                        <span>{{countMessage}}</span>
                    </div>
                </div>
            </div>
            <div class="ti-four">
                <div class="img-right">
                    <i class="element-icons el-iconjinggao" style="font-size: 80px;"></i>
                </div>
                <div class="message">
                    <div class="title">
                        公司通告
                    </div>
                    <div class="count">
                        <span>{{countMessage}}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="ti-xiang"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    export default {
        name: "StaffHello",
        data(){
            return{
                countMessage:1002,
                lineSeries:[],
                lineName:[],
                lineOption : {
                    title: {
                        text: '各区上周-日收入图'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
                    legend: {
                        // data: ['邮箱', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                        data: []
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: []
                    // series: [
                    //     //更改这里面的数据即可
                    //     {
                    //         name: '邮箱',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [120, 132, 101, 134, 90, 230, 210]
                    //     },
                    //     {
                    //         name: 'Union Ads',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [220, 182, 191, 234, 290, 330, 310]
                    //     },
                    //     {
                    //         name: 'Video Ads',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [150, 232, 201, 154, 190, 330, 1410]
                    //     },
                    //     {
                    //         name: 'Direct',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [320, 332, 301, 334, 390, 330, 320]
                    //     },
                    //     {
                    //         name: 'Search Engine',
                    //         type: 'line',
                    //         stack: 'Total',
                    //         label: {
                    //             show: true,
                    //             position: 'top'
                    //         },
                    //         areaStyle: {},
                    //         emphasis: {
                    //             focus: 'series'
                    //         },
                    //         data: [820, 932, 901, 934, 1290, 1330, 1320]
                    //     }
                    // ]
                }
            }
        },
        mounted(){
            this.getLine();
        },
        methods:{
            getLine(){
                this.$http({
                    url:'/echart/test',
                    method:'get'
                }).then(result=>{
                    console.log(result);
                    if(result.status==200){
                        for(let i=0;i<result.data.length;i++){
                            console.log(result.data[i])
                            this.lineSeries.push(result.data[i])
                            this.lineName.push(result.data[i].data);
                            this.lineOption.legend.data.push(result.data[i].name);
                            this.lineOption.series.push(result.data[i]);
                        }
                        var myChart = echarts.init(document.querySelector('.ti-xiang'));
                        myChart.setOption(this.lineOption);

                        console.log(this.lineOption);
                        console.log(this.lineName[0]);
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .ti-tishi{
        width: 100%;
        height: 120px;
        display: flex;
        margin-bottom: 32px;
    }
    .ti-first{
        cursor: pointer;
        display: flex;
        width: 24%;
        margin-right: 2%;
        background-color: white;
    }
    .ti-first:hover{
        box-shadow: 5px 5px 5px #B3C0D1;
    }
    .ti-second{
        cursor: pointer;
        display: flex;
        background-color: white;
        width: 24%;
        margin-right: 2%;
        margin-left: 1%;
    }
    .ti-second:hover{
        box-shadow: 5px 5px 5px #B3C0D1;
    }
    .ti-third{
        cursor: pointer;
        display: flex;
        background-color: white;
        width: 24%;
        margin-right: 2%;
        margin-left: 1%;
    }
    .ti-third:hover{
        box-shadow: 5px 5px 5px #B3C0D1;
    }
    .ti-four{
        cursor: pointer;
        display: flex;
        background-color: white;
        width: 24%;
        margin-left: 1%;
    }
    .ti-four:hover{
        box-shadow: 5px 5px 5px #B3C0D1;
    }
    .ti-xiang{
        width: 100%;
        height: 366px;
        margin-top: 50px;
        background-color: white;
        margin-bottom: 32px;
    }
    .message{
        height: 100%;
        width: 50%;
        margin-left: 15%;
    }
    .title{
        margin-top: 12%;
        margin-left: 55%;
    }
    .count{
        margin-left: 55%;
        font-size: 22px;
        margin-top: 6%;
    }
</style>